<template>
<!--  //代理商充值弹窗-->
  <el-dialog
    title="请充值"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <div class="Recharge">
      <el-form ref="Recharge" :model="Recharge" :rules="rules" label-width="80px">
        <el-form-item label="账号" v-if="Account">
          <span>{{Account}}</span>
        </el-form-item>
        <el-form-item label="名称" v-if="membername">
          <span>{{membername}}</span>
        </el-form-item>
<!--        <el-form-item label="客户" prop="amount">-->
<!--          &lt;!&ndash;            <div class="report_header_query" style="width: 100%;">&ndash;&gt;-->
<!--          <el-select style="width: 100%;" v-model="memberName" :filter-method="remoteMethod" value-key="id"-->
<!--                     filterable placeholder="请选择"-->
<!--                     @change="selectMember">-->
<!--            <el-option-->
<!--              style="width: 600px;"-->
<!--              v-for="item in memberList"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item">-->
<!--              <div style="display: flex">-->
<!--                <span style="width: 60px;">{{item.code}}</span>-->
<!--                <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>-->
<!--                <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>-->
<!--                <div style="width: 200px;">-->
<!--                  <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-option>-->
<!--            &lt;!&ndash;                  <div style="display: flex;width: 100%;position: absolute;bottom: 0">&ndash;&gt;-->
<!--            &lt;!&ndash;                    <div style="width: 50%;background-color: rgb(248,248,248);"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;                    <div class="elOption" @click="toSearchMember">搜索客户</div>&ndash;&gt;-->
<!--            &lt;!&ndash;                    <div class="elOption1" @click="toAddMember">新增客户</div>&ndash;&gt;-->
<!--            &lt;!&ndash;                  </div>&ndash;&gt;-->
<!--            <div style="height: 30px"></div>-->
<!--          </el-select>-->
<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
<!--        </el-form-item>-->
        <el-form-item label="充值金额" prop="amount">
          <el-input type="number" v-model="Recharge.amount" placeholder="请输入库存充值金额"></el-input>
        </el-form-item>
        <!--                  <el-form-item label="充值折扣" prop="agio">-->
        <!--                    <el-input v-model="Recharge.agio"></el-input>-->
        <!--                  </el-form-item>-->
        <el-form-item label="备注" prop="memo">
          <el-input v-model="Recharge.memo"></el-input>
        </el-form-item>
        <el-form-item label="实收金额">
          <!-- <el-input v-model="Recharge.agio"></el-input> -->
          <span style="color: red;">{{Recharge.agio!=0?Recharge.amount*Recharge.agio/10:Recharge.amount}}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Rechargeselect('Recharge')">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog></template>

<script>

import {list as memberList1, list as memberList} from '@/api/member'
import {fillCard} from "@/api/cardBill";

export default {
  name: "Recharge.vue",
  props:['memberId'],
  data(){
    return {
      Account:'',
      memberName:'',
      membername:'',
      rules: {
        amount: [
          { required: true, message: '请输入充值金额', trigger: 'blur' },
        ],
        agio: [
          { required: true, message: '请输入充值折扣', trigger: 'blur' },
        ],
        memo: [
          { required: true, message: '请输入充值备注', trigger: 'blur' },
        ],
      },
      dialogVisible:false,
      Recharge:{
        amount:"",
        agio:"",
        memo:""
      },
      memberList:[],
      cardType:'',
      paymentPluginId:''
    }
  },
  created() {
    this.loadMember('')
    console.log(this.memberId)
  },
  methods:{
    Rechargeclick(rechargeType,memberId) {
      this.dialogVisible=true
      if(rechargeType == 'memberShipCard'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '0'
      }
      if(rechargeType == 'groupPurchaseCoupon'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '2'
      }
      if(rechargeType == 'welfareRecharge'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '3'
      }
      if(rechargeType == 'welfare4Recharge'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '4'
      }
      if(rechargeType == 'welfare5Recharge'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '5'
      }
      if(rechargeType == 'welfare6Recharge'){
        this.paymentPluginId = "cashPayPlugin"
        this.cardType = '6'
      }




      this.Recharge.amount=''
      this.Recharge.agio=''
      this.Recharge.memo=''
      this.memberName=''
    },
    remoteMethod(query) {
      this.loadMember(query)
    },
    selectMember(data) {
      this.memberId = data.id;
    },
    handleClose(){
      this.dialogVisible=false
    },
    Rechargeselect(){
      console.log(this.$refs.Recharge)
      this.$refs.Recharge.validate((valid) => {
        if (valid) {
          // const params = new URLSearchParams()
          // params.append('amount', this.Recharge.amount)
          // params.append('cardType', this.cardType)
          // params.append('memberId', this.memberId)
          // params.append('memo', this.Recharge.memo)
          // params.append('paymentPluginId', this.paymentPluginId)
          // params.append('agio', this.Recharge.agio)

          let params = {
            amount: this.Recharge.amount,
            cardType: this.cardType,
            memberId:this.memberId,
            memo: this.Recharge.memo,
            paymentPluginId :this.paymentPluginId
          }

          fillCard({
            "cardId": "string",
            "code": "string",
            "description": "string",
            "id": "string",
            "productId": 0,
            "quantity": 0,
            "queue": "string"
          },params).then(res=>{
            this.dialogVisible=false
            this.$message("充值成功")
            // this.loadOrder()
            this.$emit('loadOrder', )
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async  loadMember(query) {
      var _this = this
      let params = new URLSearchParams();
      params.append('keyword', query)
      await memberList1(params).then(response => {
        console.log("这是客户信息");
        console.log(response);
        _this.memberList = response.data.data
        if(_this.memberList.length==0){
          this.memberphonetype=true
        }else{
          this.memberphonetype=false
        }
        if (_this.memberList.length > 4) {
          this.optionHeight = 'height:35px'
        } else {
          this.optionHeight = 'height:55px'
        }
      }).catch(error => {
        console.log('error!!')
      });
    },
  },

}
</script>





<style scoped>
.Recharge .el-form-item {
  margin-bottom: 20px!important;
}
</style>
